
import EventBus from "../../EventBus"
import { mouseStatus } from "../../lib/const"
import { getCmTree, getDashboardAndCategoryTreeByType } from "@/api/dashboard/board"
import "./index.less"
import Icon from "../../Icon/index.jsx"

export default {
  name: "Analysis",
  data () {
    return {
      myAnalysisList: [], // getList("myAnalysis"),
      commonAnalysisList: [], // getList("commonAnalysis"),
      myCreateAnalysisList: [],
      myCollectionAnalysisList: [],
      activeName: "analysis",
      replaceFields: { children: 'children', title: 'name', key: 'id', draggable: true }
    }
  },
  methods: {
    handleDragStart (data, event) {
      // 保留当前鼠标距离选中元素的偏移量
      const mouseOffset = {
        x: event.offsetX,
        y: event.offsetY
      }
      console.log(JSON.stringify({ data, mouseOffset, type: 'analysis' }))
      event.dataTransfer.setData("data", JSON.stringify({ data, mouseOffset, type: 'analysis' }))
      EventBus.$emit("mouseStatusChange", mouseStatus.ADD_DRAG)
    },
    handleCheck (e) {
      console.log(e)
    },
    renderTree (title, list, isShow) {
      return (
        <div>
          <div class="title">{title} {isShow && <a-icon onClick={this.handleGoComponent} type="plus-circle" class="icon" />}</div>
          <a-tree show-icon>
            {
              list.map(item => this.renderTreeItem(item))
            }
          </a-tree>
        </div>
      )
    },
    renderTreeItem (treeNode) {
      const { id, name, children, chartName, treeObj } = treeNode

      const list = [...(children || []), ...(treeObj || [])]
      return (
        <a-tree-node
          key={id}
          icon={this.getIcon(treeNode)}
          title={<span onDragstart={e => this.handleDragStart(treeNode, e)} slot='title' draggable={!!chartName}>{name}</span>}>
          {
            list && list.map(item => this.renderTreeItem(item))
          }
        </a-tree-node>
      )
    },
    renderBoardTree (title, list) {
      return (
        <div>
          <div class="title">{title}</div>
          <a-tree show-icon>
            {
              list.map(item => this.renderBoardTreeItem(item))
            }
          </a-tree>
        </div>
      )
    },
    renderBoardTreeItem (treeNode, isComponentList) {
      const { id, name, children, treeObj, itemList } = treeNode
      // let list = treeObj && treeObj.length > 0 ? treeObj : children
      let list = [...(children || []), ...(treeObj || [])]
      // 如果当前是组件列表
      if (isComponentList) {
        return (
          <a-tree-node
            key={id}
            icon={this.getIcon(treeNode)}
            title={<span onDragstart={e => this.handleDragStart(treeNode, e)} slot='title' draggable={true}>{name}</span>}>
            {
              list && list.map(item => this.renderTreeItem(item))
            }
          </a-tree-node>
        )
      } else {
        // 判断当前是否是看板,如果是,则下一层渲染组件列表
        const isBoard = !treeObj
        if (isBoard) {
          list = itemList
        }
        return (
          <a-tree-node key={id} title={name} >
            {
              list && list.map(item => this.renderBoardTreeItem(item, isBoard))
            }
          </a-tree-node>
        )
      }
    },
    getData (name) {
      getCmTree({
        name,
        type: '1'
      })
      .then(data => {
        this.myAnalysisList = data.data
      })
      getCmTree({
        name,
        type: '2'
      })
      .then(data => {
        this.commonAnalysisList = data.data
      })
    },
    handleSearchChange (event) {
      const title = event.target.value.trim()
      this.getData(title)
    },
    getIcon (node) {
      if (node.chartAxisData) {
        const style = {
          marginRight: '4px',
          fontSize: '16px'
        }
        // const aa =  getAnalysisIcon('analysis',node.dasChartTypeId || node.chartTypeId)
        // console.log(aa)
        return <Icon type="analysis" chartId={node.dasChartTypeId || node.chartTypeId} />
      }
    },
    handleGoComponent () {
      this.$router.push({ path: '/dashboard/visualizationComponent', query: { type: 'add' } })
    }
  },
  components: {
    Icon
  },
  created () {
    // this.getData()
  },
  render () {
    const {
      myAnalysisList,
      commonAnalysisList,
      myCreateAnalysisList,
      myCollectionAnalysisList,
      handleSearchChange
    } = this
    // 防抖
    const debounce = (fn, wait) => {
      let timeout = null
      return function (event) {
        // event.persist()
        if (timeout !== null) clearTimeout(timeout)
        timeout = setTimeout(fn, wait, event)
      }
    }
    return (
      <div class="analysis-container">
        <a-input placeholder="请输入搜索关键字" onChange={debounce(handleSearchChange, 400)} class="title-search">
          <a-icon slot="prefix" type="search" />
        </a-input>
        <div class="list">
          { this.renderTree("我的组件", myAnalysisList, true) }
          { this.renderTree("公共组件", commonAnalysisList) }
        </div>
      </div>
    )
  }
}
